I know that we did together in my office hours, but please reach out if you need any further explanations as to how and why we want to do this. Great job on following the implementation!

The (Usual) Steps to Lifting Up State:

1. Establish state with data (from data folder or API) in necessary parent component.
2. Design updateFunction that uses the id of an object to preforms desired changes and updates state.
3. Pass updateFunction to necessary children components
4. Make updateFunction the event handler and passing prop.id as parameter.

Don'r forget you also want to include the toggleLike function you are passing in as a prop as well!

Just a friendly reminder that we can also de-structure our props with const ChatEntry = ( {myProp}) to have direct access to them!

So you see how setting all of those props took up a lot of lines of code? We could make that more concise with this here:

 < ChatEntry toggleLike={props.toggleLike} key={entry.id} entry={entry} />

Then in each chatEntry we could access any prop we needed with props.entry.myProp

Remember to put your props-types checking for this one. You could use the arrayOf and then shape functionality to be very explicit about the data structure you are expecting to pass through here.

I see you didn't do the optional enhancement, just in case you were wondering about how it worked you could basically use the ids of each message to decide if it should be on the right or left side of the screen. the receiver would always be an even id and the sender would always be odd.

const localRemote = props.id % 2 === 0 ? 'chat-entry local' : 'chat-entry remote';

then we could assign could put this class name in the div on line 8